<template>
  <div class="my-account">
    <Card title="基本信息">
      <Row>
        <Col span="8">
          <div>
            账户：
            <Input type="text" style="width: 200px;"/>
            <span class="c4">*</span>
          </div>
          <div class="mt10">
            昵称：
            <Input type="text" style="width: 200px;"/>
            <span class="c4">*</span>
          </div>
          <div class="mt10">
            性别：
            <RadioGroup v-model="form.sex">
              <Radio label="1">
                <span>男</span>
              </Radio>
              <Radio label="2">
                <span>女</span>
              </Radio>
            </RadioGroup>
          </div>
          <div class="mt10">
            手机：
            <Input type="text" style="width: 200px;"/>
            <a href="#">解绑</a>
          </div>
          <div class="mt10">
            邮箱：
            <Input type="text" style="width: 200px;"/>
            <a href="#">解绑</a>
          </div>
        </Col>
        <Col span="16">
          <Upload action="//jsonplaceholder.typicode.com/posts/">
            <div
              style="width: 120px;height:120px;line-height: 120px;text-align:center;border:1px dashed #ddd;"
            >
              <Icon type="ios-camera" size="20"></Icon>上传头像
            </div>
          </Upload>
          <div class="mt10">公司认证：浙江云创（已认证）</div>
        </Col>
      </Row>
    </Card>
    <Card title="业务信息" class="mt20">
      <Row>
        <Col span="8">
          <div>
            主要行业应用：
            <Input type="text" style="width: 200px;"/>
          </div>
          <div class="mt10">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司网址：
            <Input type="text" style="width: 200px;"/>
          </div>
        </Col>
        <Col span="16">
          <div>
            主营业务：
            <Input type="text" style="width: 200px;"/>
          </div>
        </Col>
      </Row>
    </Card>
    <Card title="联系信息" class="mt20">
      <Row>
        <Col span="6">
          <div>
            国家：
            <Input type="text" style="width: 200px;"/>
          </div>
        </Col>
        <Col span="18">
          <div class="clearfix">
            <div class="fl mt10">
              所在地区：
            </div>
            <div class="fl">
              <v-distpicker province="浙江省" city="杭州市" area="西湖区" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
            </div>
            
          </div>
        </Col>
        <Col span="24" class="mt10">
          <div>
            街道：
            <Input type="text" style="width: 616px;"/>
          </div>
        </Col>
        <Col span="8" class="mt10">
          <div>
            电话：
            <Input type="text" style="width: 200px;"/>
          </div>
        </Col>
        <Col span="16" class="mt10">
          <div>
            传真：
            <Input type="text" style="width: 200px;"/>
          </div>
        </Col>
      </Row>
    </Card>

    <Button type="primary" style="width:160px;" class="mt20 mb40">保存</Button>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";

export default {
  components:{VDistpicker},
  mounted() {
    this.$store.commit("UPDATE_POSITION", this.position);
  },
  data() {
    return {
      position: [
        { title: "我的账户", link: "/admin/myAccount" },
        { title: "账户信息" }
      ],
      form: {
        sex: "1"
      }
    };
  },
  methods:{
     selectProvince(p){
       
     },
     selectCity (c) {
       
     },
     selectArea (a) {

     }
  }
};
</script>

<style lang="less" scoped>
</style>
